<template>
    <div class="share_view">
        <div class="head">
            <div class="container">
                <div class="left">
                    <!-- <div class="logo">
                        <span>{{$store.state.project_config.name.substring(0,2)}}</span>
                        {{$store.state.project_config.name.substring(2)}}
                    </div> -->
                    <div class="disk">
                        <div @click="on_back" class="back">
                            <i class="el-icon-back"></i>
                            返回
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="user">
                        <User_contextmenu_bt></User_contextmenu_bt>
                    </div>
                </div>
            </div>
        </div>
        <div class="centre">
            <div class="left">
                <div class="bt_list">
                    <div class="left">
                        <span>
                            {{$store.state.user_data.name}}
                        </span>
                        待接受的分享文件
                    </div>
                    <div class="right">
                        <!-- <div class="item">
                            <Qrcode_bt></Qrcode_bt>
                        </div> -->
                        <div class="item">
                            <Download_bt>
                                <template #left>
                                    <i class="icon-download icon"></i>
                                </template>
                            </Download_bt>
                        </div>
                        <!-- <div class="item">
                            <Unshare_bt>
                                <template #left>
                                    <i class="icon-cancel icon"></i>
                                </template>
                            </Unshare_bt>
                        </div> -->
                        <!-- 查看用户和登陆用户不同时显示 -->
                        <!-- <div class="item" v-if="true">
                            <Save_bt></Save_bt>
                        </div> -->
                    </div>
                </div>
                <div class="container">
                    <Data_show_mode_cp
                        :data_list="data_list"
                        data_type="share"
                        only_sign="id">
                        <template #left>
                            全部分享
                        </template>
                    </Data_show_mode_cp>
                </div>
            </div>
        </div>
        <div class="bottom">

        </div>
    </div>
</template>

<script>
import User_contextmenu_bt from '@/components/public_bt/user_contextmenu_bt'
import Data_show_mode_cp from '@/components/public_cp/data_show_mode'
import Download_bt from '@/components/public_bt/download_bt'
// import Qrcode_bt from '@/components/public_bt/qrcode_bt'
// import Unshare_bt from '@/components/public_bt/unshare_bt'
// import Save_bt from '@/components/public_bt/save_bt'
export default { //分享视图组件
    name: 'Share_view',
    components:{
        User_contextmenu_bt,
        Data_show_mode_cp,
        Download_bt,
        // Qrcode_bt,
        // Unshare_bt,
        // Save_bt,
    },
    data(){ 
        return{
            data_list:[],
        };
    },
    created(){
        this.get_data();
    },
    watch:{
        '$store.state.update_data'(){ //监听全局更新的状态来决定是否更新文件列表
            this.get_data();
        },
    },
    methods:{
        get_data(){ //从后台请求文件数据
            this.$store.commit('set_loading',{
                state:true,
            });
            this.$axios.json_post('/shared/myreception').then(({data})=>{
                this.data_list = data;
            }).finally(()=>{
                this.$store.commit('set_loading',{
                    state:false,
                });
            }).catch(()=>{
                return;
            });
        },
        on_back(){ //返回界面
            this.$router.back(-1);
        },
    },
}
</script>

<style scoped lang='scss'>
.share_view{
    width: 100%;
    max-height: 100vh;
    overflow: hidden;
    >.head{
        height: fit-content;
        background-color: #f5f8fa;
        >.container{
            height: 65px;
            margin: 0 auto;
            width: 100%;
            max-width: 1000px;
            display: flex;
            flex-direction:row;
            justify-content: space-between;
            align-items: center;
            >.left{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                >.logo{
                    height: 64px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size:25px;
                    font-weight: bold;
                    letter-spacing: 2px;
                    line-height: 100%;
                    span{
                        margin-right: 2px;
                        background-color: #2b2e4a;
                        border-radius: 3px;
                        color: white;
                        padding: 5px 2px;
                    }
                }
                >.disk{
                    font-size: 14px;
                    // margin-left: 25px;
                    line-height: 100%;
                    >.back{
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        color: #364f6b;
                        font-weight: bold;
                        background-color: #f2f7ff;
                        border-radius: 3px;
                        border: 1px solid white;
                        padding: 0 5px;
                        i{
                            font-size: 30px;
                        }
                    }
                }
            }
            >.right{
                width: fit-content;
            }
        }
    }
    >.centre{
        height: calc(100vh - 65px);
        overflow-y:auto;
        margin: 0 auto;
        margin-top: 15px;
        width: 100%;
        max-width: 1000px;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15px;
        >.left{
            >.bt_list{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                >.left{
                    font-size: 14px;
                    line-height: 100%;
                    font-weight: bold;
                    color: #888;
                    span{
                        font-size: 18px;
                        margin-right: 5px;
                        color: #2b2e4a;
                    }
                }
                >.right{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    >.item{
                        height: 35px;
                        border: 1px solid #dbdbdb;
                        border-radius: 3px;
                        margin-left: 15px;
                        transition: all 0.2s;
                        &:hover{
                            background-color: #f5f8fa;
                        }
                    }
                }
            }
        }
        >.right{
            width: 100%;
            height: 230px;
            background-color: rgb(208, 208, 208);
            border-radius: 3px;
        }
    }
}
</style>
